<template>
  <div class="app-container">
    <form-filter
      @submit-form="submitFilterForm"
    ></form-filter>
    <el-table
      :data="tableData.list"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="账户名"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modifyType"
        label="记录类型"
        width="180"
        align="center">
        <template slot-scope="{row}">
          {{row.modifyType===0?'手机号':'邮箱'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="modifyContent"
        label="手机号/邮箱"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center">
        <template slot-scope="{row}">
          {{row.status===0?'已删除':'使用中'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        label="变更时间"
        align="center">
        <template slot-scope="{row}">
         {{row.modifyTime|parseTime}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import formFilter from './formFilter';
import { pickerOption, grid } from '@/build';
import getCommand from '@/mixins/getCommand';
import { agencyContactModify } from '@/services/api/agency';

export default {
  name: 'index',
  components: { formFilter },
  mixins: [grid, getCommand, pickerOption],
  data() {
    return {
      tableData: {
        list: [],
      },
      filters: {
        userType: 1,
        dateType: 2,
        startDate: moment().format('YYYY-MM-DD 00:00:00'),
        endDate: moment().format('YYYY-MM-DD 23:59:59'),
        modifyType: '-1',
        status: '-1',
        size: 20,
        page: 1,
      },
    };
  },
  mounted() {
    const phoneShowPartial = this.roleCheck('phone-show-partial');
    const phoneShowAll = this.roleCheck('phone-show-all');
    const emailShowPartial = this.roleCheck('email-show-partial');
    const emailShowAll = this.roleCheck('email-show-all');
    this.bindGet(agencyContactModify, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        return data;
      },
      format: (data) => {
        _.each(data.list, (val) => {
          if (val.modifyType === 0) {
            val.modifyContent = _.formatUserPhoneEmail(val.modifyContent, phoneShowPartial, phoneShowAll);
          } else {
            val.modifyContent = _.formatUserPhoneEmail(val.modifyContent, emailShowPartial, emailShowAll);
          }
        });
        return data;
      },
    });
    this.doGet({ action: 'getGrid' });
  },
  methods: {
    submitFilterForm(formInline) {
      const { time } = formInline;
      let startDate;
      let endDate;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startDate = time[0];
        endDate = time[1];
        formInline = { ...formInline, startDate, endDate };
      } else {
        this.filters.startDate = undefined;
        this.filters.endDate = undefined;
      }
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
  },
};
</script>

<style scoped>

</style>
